<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../libs/vue.js"></script>
    <style>
        .static{
            width:140px;
            height:140px;
            margin:20px;
            text-align: center;
            line-height: 140px;
            color:#fff;
            font-size: 30px;
        }
        .a{
            background: darkgoldenrod;
        }
        .b{
            border:4px solid darkred;
        }
        .c{
            border-radius: 50%;
            box-shadow:  0 0 5px 0px  #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{ title}} </h2>
        <h2>message -- {{message }}</h2>
        <p>
            <input type="text" v-model.lazy.number.trim ="message">
        </p>
        <div>
            <textarea v-model="message" ></textarea>
        </div>
        <div>
            <label for="check">请同意我们的条款</label>
            <input id="check" type="checkbox" v-model="check">  
            <p>check : {{check}}</p>
        </div>
        <div>
            <p>我的爱好是:  {{checkList }}</p>
            <label for="game">游戏</label>
            <input type="checkbox" id="game" value="Game" v-model="checkList">
            <label for="sleep">睡觉</label>
            <input type="checkbox" id="sleep" value="Sleep" v-model="checkList">
            <label for="phone">玩手机</label>
            <input type="checkbox" id="phone" value="Phone" v-model="checkList">
        </div>
        <div>
            <p>请选择你的性别: {{pick}}</p>
            <label for="male">男性</label>
            <input type="radio" id="male" value="1" v-model="pick">
            <label for="female">女性</label>
            <input type="radio" id="female" value="2" v-model="pick">
            <label for="nomale">变性</label>
            <input type="radio" id="nomale" value="3" v-model="pick">
        </div>
        <div>
            <p>选择你喜欢的城市: {{choose}}</p>
            <select v-model="choose">
                <option value="">请选择</option>
                <option :value="l.code" v-for="(l,i) in cities"> {{l.name }}</option>
            </select>
        </div>
        <div>
            <p>动态的value 绑定</p>
            <input type="checkbox"
                v-model="toggle"
                :true-value="yes"
                :false-value="no"
            >请选择
            <p>
                toggle == {{toggle}}
            </p>
        </div>
        <div>
            <p>你喜欢的动物是: {{love}}</p>
            <p>
                <input type="radio" :value="a" v-model="love"> 猫
                <input type="radio" :value="b" v-model="love"> 狗
                <input type="radio" :value="c" v-model="love"> 老鼠

            </p>
        </div>
    </div>
    <script>



        const vm = new Vue({
            data:{
                title:"v-model 数据双向绑定 ",  
                message:"Vue is so big api ",
                check:true ,
                checkList:[],
                pick:'',
                cities:[
                    {
                        name:'北京',
                        code:"BJ"
                    },
                    {
                        name:'成都',
                        code:"CD"
                    },
                    {
                        name:'武汉',
                        code:"WH"
                    },
                    {
                        name:'上海',
                        code:"SH"
                    },
                    {
                        name:'拉萨',
                        code:"LS"
                    }
                ],
                choose:'',
                toggle:true,
                yes:'晚上好好看电影---',
                no:'我要回去睡觉觉....',
                love:"",
                a:"Cat",
                b:"Dog",
                c:"Mouse"
            },
            methods:{

            },
            mounted(){
                document.querySelectorAll('title')[0].innerHTML = this.title;
               
               
            }
        }).$mount("#app")

        var user = {
            username:"zkl",
            age:28
        }

        Object.defineProperty(user,'username',{
            // 读取值得时候触发
            get(){
                console.log('get - get ')
            },
            // 监听的值改变 
            set(v){
                console.log('set - set - set ')
                
            }
        })

    </script>
    <!-- 
        v-model  用于绑定 input 和 textarea 的 value  输入框 

        语法糖

        它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理


        v-model 实现数据双向绑定
        view  视图层   修改视图(input 事件)  v-model 会自动去更新对应的 数据(model)
        model 数据层   修改数据  通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)

        Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点

        设计模式   
        MVC        angularJS  
        M  model 数据层
        V  view  视图层
        C  controller 控制器层   

        MVVM   
        M  model 数据层
        V  views 视图层
        VM viewmodel  数据视图对象  

        MVP  
        M  model 数据层
        V  views 视图层
        P  presenter  逻辑层  (js逻辑处理代码+方法)

        v-model 的底层原理   语法糖
        Object.defineProperty()  进行数据劫持  (监听数据改变 从而触发修改视图的逻辑函数)  (监听输入框输入事件 从而修改对应的数据)

        它会根据控件类型自动选取正确的方法来更新元素  
        v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
        负责监听用户的输入事件以更新数据

        text 和 textarea 元素使用 value 属性和 input 事件
        checkbox 和 radio 使用 checked 属性和 change 事件    
        select 字段将 value 作为 prop 并将 change 作为事件   $("#select").prop()

        v-model 也有修饰符 
        lazy    input 变为 change 延迟触发 
        trim    去除首尾空格
        number  用户的输入值转为数值类型


        在组件上使用 v-model

     -->
    
</body>
</html>